<include file="../Public/header.html" />
<link href="__PUBLIC__/Css/user.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="__PUBLIC__/Js/user/common.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery.form.js"></script>
<link href="__PUBLIC__/Js/setavatar/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Js/avatar/avatar.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/setavatar/jquery.imgareaselect.min.js"></script>
<div id="mainWrapper">

<div id="main">
 	<include file="../User/Tpl/default/Public/user_left_nav_box.html" />
    
    <div id="right_box">
				<div class="item_top">
					<ul>
						<li class="top_bar top-bar-wide top_baron">{$userNavDict[MODULE_NAME][ACTION_NAME]}</li>
					</ul>
				</div>
				
				<div class="feedBox">
							
							<!-- 修改密码 -->
		          <div class="setItems">
		          	<div class="setFold setUnfold" rel="userinfo" >
		              <h2>个人信息</h2>
		            </div>
		            <div style="display: block;" class="setItemsInfo">
		            		<div class="dataR right">
			            		<div class="k_desc_div" style="margin: 2px;">
												<div class="k_icon k_bulb"></div>
												<strong>修改个人信息</strong>
												<div>
													可以在此修改个人信息！！
													<br>
													说明：
													<br>
													隐私》 设置其他用户可否看到我的信息！
													<br>
													生日》 生日临近时，我们将送您份礼物！
													<br>
													城市》 录入城市将便于更好的查看礼物！
													<br>
													完善信息有助于你收到喜欢的礼物！
												</div>
											</div>	
		            		</div>
		            		<form action="{:U('User://Account/saveProfile')}" method="post">
							      <div class="data">
							            <ul>
							            		<li>
							                    <div class="left alR input_title areal">邮箱：</div>
							                    <div class="left area2">
							                    <php>if(!empty($user)&&empty($user['email'])){</php>
								                    <php>if('sina'==$user['sync_type']){</php>
														<img src="/Public/Images/global/sina24x24.png" align="absmiddle" title="新浪微博直接登录">
													<php>}</php>
													<php>if('douban'==$user['sync_type']){</php>
														<img src="/Public/Images/global/douban24x24.png" align="absmiddle" title="豆瓣直接登录">
													<php>}</php>
													&nbsp;直接登录&nbsp;&nbsp;<a href="javascript:register4Local( '{:U('Index://Public/registerLocal')}' );">转换为系统账号</a>
							                    <php>}else{</php>
							                    <div class="left mr5" style=" font-size: 16px;">{$userInfo['email']}</div>
							                    <php>}</php>
							                    </div>
							                </li>
							                <li>
							                    <div class="left alR input_title areal">隐私：</div>
							                    <div class="left area2">
							                      <div class="left mr5">
							                      	<label><input name="is_open" type="radio" value="Y" <eq name="userInfo.is_open" value="Y">checked='true'</eq> /> 公开</label> &nbsp;&nbsp;&nbsp;
		                        					<label><input name="is_open" type="radio" value="N" <eq name="userInfo.is_open" value="N">checked='true'</eq>  dataType="Group"  msg="必须选定一个性别" /> 保密</label>
																		</div>
																	</div>
							                </li>
							                <li>
							                    <div class="left alR input_title areal">昵称：</div>
							                    <div class="left area2">
							                      <div class="left mr5"><input id="uname" name="uname" type="text" value="{$userInfo['uname']}" class="input_text" /></div>
							                    </div>
							                </li>
							                <li>
							                    <div class="left alR input_title areal">名字：</div>
							                    <div class="left area2">
							                      <div class="left mr5"><input id="realname" name="realname" type="text" value="{$userInfo['realname']}" class="input_text" /></div>
							                    </div>
							                </li>
							                <li>
							                    <div class="left alR input_title areal">性别：</div>
							                    <div class="left area2">
							                      <div class="left mr5">
							                      	<label><input name="gender" type="radio" value="M" <eq name="userInfo.gender" value="M">checked='true'</eq> /> 男</label> &nbsp;&nbsp;&nbsp;
		                        					<label><input name="gender" type="radio" value="F" <eq name="userInfo.gender" value="F">checked='true'</eq>  dataType="Group"  msg="必须选定一个性别" /> 女</label>
																		</div>
																	</div>
							                </li>
							                <li>
							                    <div class="left alR input_title areal">生日：</div>
							                    <div class="left area2">
							                      <div class="left mr5">
							                      	<input name="btime" type="text" class="input_text" value="{:paramMillisecond2Date($userInfo['btime'],'Y-m-d','')}" onfocus="rcalendar(this);" readonly />
																		</div>
																	</div>
							                </li>
							                
							                <li>
							                    <div class="left alR input_title areal">城市：</div>
							                    <div class="left area2">
							                      <div class="left mr5">
							                      	<input type="hidden" id="current" name='gparea' 
												                 		value="{:assembleAreaIds($userInfo['province_id'],$userInfo['city_id'],$userInfo['area_id'])}"/>
												                 		<!--province city area-->
												                 <input type="text" id="selectarea" class="input_text" 
												                 		onclick="k_selectArea($('#current').val());" 
												                 		value="{:getAreaDesc($userInfo['province_id'],$userInfo['city_id'],$userInfo['area_id'])}" readonly />
																		</div>
																	</div>
							                </li>
							                
							                <li>
							                    <div class="left alR input_title areal">地址：</div>
							                    <div class="left area2">
							                      <div class="left mr5"><input id="address" name="address" type="text" value="{$userInfo['address']}" class="input_text" /></div>
							                    </div>
							                </li>
							                
							                <li>
							                    <div class="left alR input_title areal">邮编：</div>
							                    <div class="left area2">
							                      <div class="left mr5"><input id="zipcode" name="zipcode" type="text" value="{$userInfo['zipcode']}" class="input_text" /></div>
							                    </div>
							                </li>
							                
							                <li>
							                	<div class="left alR areal">&nbsp;</div>
							                	<div class="left area2">
							                		<input type="submit" class="btn_r" value="保存修改" 
							                				id="btn_modify_pwd"/>
							                	</div>
							                </li>
							           </ul>
							      </div>
							    	</form>
			        	</div>
			        </div><!-- 修改密码 end  -->
		
							<!-- 修改交易密码 -->
		          <div class="setItems">
		            <div class="setFold setUnfold" rel="avatar" style="padding: 0px 0px;">
		            	<div style="width: 34px; margin: 4px 10px; float: left;">
			            	<div style="float:left;margin-right:10px;border:1px solid #8098A8;height:30px;padding:1px;width:30px;">
			            		<img src="{$mid|getUserFace='s'}" width="30">
			            	</div>
		            	</div>
			            <div style="margin:auto;padding: 8px 15px;">
			              <h2>修改头像&nbsp;&nbsp;&nbsp;
			              	<span class="setStep">
									  	<font class="txt1" id="avatarInfo">
											<php>if( isSetAvatar($mid) ){</php>
												已设置头像
											<php>}else{</php>
												未设置头像
											<php>}</php>
											</font>
											</span>
			              	
			              </h2>
			            </div>
		            </div>
		            <div style="display: block;" class="setItemsInfo">
		            	<div style="margin:0px 60px;">
											<div style="padding:10px 0;color:#666;"> 
												<form enctype="multipart/form-data" method="post" id="uploadpic" name="upform" dotype="ajax" callback="uploadpic" target="upload_target" action="{:U('User://Account/avatar',array('t'=>'upload'))}">
													<input type="file" name="Filedata" onchange="douploadpic()" id="Filedata" style="height:23px"/> 
													<span style="display:none;" id="loading_gif"><img src="__PUBLIC__/Js/avatar/loading.gif" align="absmiddle" />上传中，请稍侯......</span>  
												</form>
											</div> 
				              <div class="picSettings">
				                <div id="photo" class="left" style="width:400px; height:300px; border-right:1px solid #E5E5E5">
												</div>
				                <div class="left" style="width:200px; padding-left:15px;">
				                   <div style="width:180px;  margin-bottom:20px; font-size:16px"><strong>头像预览</strong></div>
				                   <div class="left" style=" width: 150px; height: 150px; border:1px solid #B4B5AF;overflow: hidden;"><img id="photo_big" src="{$mid|getUserFace='b'}" /></div>
												</div>
												<form enctype="multipart/form-data" method="post" id='upform' name="upform" dotype="ajax" callback="dosaveface" target="_blank" action="{:U('User://Account/avatar',array('t'=>'save'))}">
													<input type="hidden" name="picurl">
													<input type="hidden" name="x1">
													<input type="hidden" name="y1">
													<input type="hidden" name="x2">
													<input type="hidden" name="y2">
													<input type="hidden" name="w">
													<input type="hidden" name="h">
													<div style="clear:left; padding-top:20px;padding-left:100px;"> <input type="submit" class="btn_o" value="确定" /> <input type="button" class="btn_w" value="取消" onclick="unSetFace()" /></div>
												</form>
                			</div>
                	</div>
								</div>
			        </div><!-- 修改交易密码 end  -->
							
		          
		        <div class="c"></div>
		        </div>
		      </div>
  <!-- 右侧内容 end  -->
  <div class="c"></div>
</div>
</div>
<include file="../Public/footer.html" />
	
	
<script type="text/javascript">
	//$(document).ready(function(){
		var hs = document.location.hash;
		var up_pic_width =50;
		var up_pic_height =50;
		var _basemodel = 'userinfo';
		changeModel( hs.replace('#',''),_basemodel );
		$('.setFold').click(function(){
			if( $(this).attr('class')=='setFold' ){
				changeModel( $(this).attr('rel'),_basemodel );
			}else{
				$(this).removeClass('setUnfold');
				$(this).next('.setItemsInfo').hide();
			}
			location.href='#'+$(this).attr('rel');
		});
		_tmp_initForm('uploadpic');
		_tmp_initForm('upform');
	//});
	
	
	function _tmp_initForm(formid){
		//监听 form 表单提交
	  	$("#"+formid).bind('submit', function() {
						var callbackfun = $(this).attr('callback');
						var type   = $(this).attr('type');
						var options = {
						    success: function(txt) {
						    	//alert(txt);
						    	txt = eval("("+txt+")");
									if(callbackfun){
										callback(eval(callbackfun),txt);
									}else{
										  if(txt.boolen){
											  ui.success( txt.message );
										  }else{
											  ui.error( txt.message );
										  }
										  	 
									}
						    }
						};		
	          $(this).ajaxSubmit(options);
			 			return false;
	    });
	}
	
	function callback(fun,argum){
		fun(argum);
	}
	
	function dosaveface(txt){
		if (txt=='-1') {
			ui.error('更新失败');
		}else {
			alert('更新成功');
	        location.reload();
		}
	}
	
	function douploadpic(){
			//alert('111');
			$('#loading_gif').show();
			$('input[name="Filedata"]').hide();
			var options = {
				    success: function(txt) {
							uploadpic(txt);
				    }
			};		
			$('#uploadpic').ajaxSubmit(options);
		  return false;		
	}
	var imgrs;
	function uploadpic(txt){
		txt = eval('('+txt+')');
		if(txt.code==1){
			var tmpDate = new Date(); 
			set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);
			var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];
	//		$("#photo").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
			$("#photo").html("<img id='photo_img' src="+txt.data['picurl']+'?t='+ tmpDate.getTime()+">");
			$("input[name=picurl]").attr('value',txt.data['picurl']);
		 	$("#photo_big").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
		
		 	imgrs = $('#photo_img').imgAreaSelect({ 
						x1: 0, 
						y1: 0,
					    x2: 100, 
						y2: 100, 
						handles: true,
						onInit:preview,
						onSelectChange:preview,
						onSelectEnd:onSelectEnd,
						aspectRatio: '1:1',
						instance: true,
						parent:$('#photo')
						});
			$('#loading_gif').hide();
		 }else{
		 	alert(txt.message);
		 }
	}
	
	//重新上传图片
	function unSetFace(){
		var defaultpic = "{$mid|getUserFace=b}"
		$('input[name="Filedata"]').show();
		$("#photo").html("");
		$("input[name=picurl]").attr('value','');
	 	$("#photo_big").attr('src',defaultpic);
	 	$('#photo_big').attr('style','position: relative;');
	 	imgrs.setOptions({ remove:true });
	 	imgrs.update();
	};	
	
	function set_UP_W_H(w,h){
		up_pic_width = w;
		up_pic_height = h;
	}	
		
	function onSelectEnd(img,selection){
	    $('input[name=x1]').val(selection.x1);
	    $('input[name=y1]').val(selection.y1);
	    $('input[name=x2]').val(selection.x2);
	    $('input[name=y2]').val(selection.y2); 
	    $('input[name=w]').val(selection.width); 
	    $('input[name=h]').val(selection.height); 
	}
		
	function preview(img, selection) {
		onSelectEnd(img,selection);
		var big_scaleX = 150 / (selection.width || 1);
	    var big_scaleY = 150 / (selection.height || 1);
		
	    $('#photo_big').css({
	        width: Math.round(big_scaleX * up_pic_width) + 'px',
	        height: Math.round(big_scaleY * up_pic_height) + 'px',
	        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',
	        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'
	    });
	}		
	
	
</script>